<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.proxy_member_funds_record.operation_time'
						)}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.user_name')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.userName"
						clearable
						size="medium"
						v-input="{ name: 'num_alp' }"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.order_no')}:`"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.eventId"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'num_alp' }"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.proxy_member_funds_record.adjust_amount'
						)}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.adjustAmountMin"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 130px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="adjustAmountMin"
						@blur="
							handleAmount(
								queryData,
								1,
								'adjustAmountMin',
								'adjustAmountMax',
								$t(
									'funds.proxy_member_funds_record.form_search_tip5'
								)
							)
						"
					></el-input>
					-
					<el-input
						v-model="queryData.adjustAmountMax"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 130px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="adjustAmountMax"
						@blur="
							handleAmount(
								queryData,
								2,
								'adjustAmountMin',
								'adjustAmountMax',
								$t(
									'funds.proxy_member_funds_record.form_search_tip6'
								)
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('404101')"
						icon="el-icon-download"
						type="warning"
						:disabled="loading"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				border
				size="mini"
				show-summary
				:data="tableData"
				style="width: 100%"
				class="small-size-table"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
				element-loading-spinner="el-icon-loading"
				:summary-method="(val) => handleRow(val, summary, totalSummary)"
			>
				<el-table-column
					prop="eventId"
					align="center"
					min-width="260"
					:label="$t('funds.order_no')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<Copy :title="scope.row.eventId" :copy="copy">
							{{ scope.row.eventId }}
						</Copy>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('funds.user_name')"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.userName"
							:title="scope.row.userName"
							:copy="copy"
						>
							{{ scope.row.userName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantId"
					align="center"
					:label="$t('common.belong_merchant')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ merchantFilter(scope.row.merchantId) }}
						</span>
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="vipLevel"
						align="center"
						:label="$t('funds.vip_level')"
						min-width="120"
					>
						<template slot-scope="scope">
							VIP{{ scope.row.vipLevel }}
						</template>
					</el-table-column> -->
				<el-table-column
					prop="adjustType"
					align="center"
					:label="$t('funds.proxy_member_funds_record.adjust_type')"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							typeFilter(
								scope.row.adjustType,
								'memberPatchSubAdjustType'
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="adjustAmount"
					align="center"
					:label="$t('funds.proxy_member_funds_record.adjust_amount')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.adjustAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="adjustAmount"
					align="center"
					:label="$t('funds.proxy_member_funds_record.annex_file')"
					min-width="120"
				>
					<template slot-scope="scope">
						<el-link
							v-if="scope.row.imageAddress"
							class="lightBlueColor"
							type="primary"
							@click="dialogData(scope.row)"
						>
							{{ $t('funds.proxy_member_funds_record.checks') }}
						</el-link>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operator"
					align="center"
					:label="$t('funds.proxy_member_funds_record.proposer')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.operator || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="eventTime"
					align="center"
					:label="
						$t('funds.proxy_member_funds_record.operation_time')
					"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.eventTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					:label="$t('common.remark')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<image-viewer
			v-if="imageViewerVisible"
			:visible.sync="imageViewerVisible"
			:url-list="imageViewerSrc"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
const startTime = () => {
	return dayjs()
		.startOf('day')
		.valueOf()
}
const endTime = () => {
	return dayjs()
		.endOf('day')
		.valueOf()
}

export default {
	name: routerNames.memberDeductionRecord,
	components: {
		MainContent
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {},
			searchTime: [startTime(), endTime()],
			tableData: [],
			summary: {},
			totalSummary: {},
			imageViewerVisible: false,
			imageViewerSrc: [],
			merchantObj: '',
			exportBtnLoading: false
		}
	},
	computed: {},
	methods: {
		loadData() {
			this.loading = true
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				eventTimeStart: dayjs(timeArr[0]).format('YYYY-MM-DD HH:mm:ss'),
				eventTimeEnd: dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss'),
				...this.getParams()
			}
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getMemberAccountSubList(params)
				.then((res) => {
					const { record, totalRecord, summary } = res.data || {}
					this.tableData = record || []
					this.total = totalRecord || 0
					this.summary = summary || {}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getMemberAccountSubSummary(params)
				.then((res) => {
					this.totalSummary = res.data || {}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {}
			this.merchantObj = ''
			this.searchTime = [startTime(), endTime()]
			this.pageNum = 1
			this.loadData()
		},
		reloadTime() {
			this.searchTime = [startTime(), endTime()]
		},
		dialogData(val) {
			this.imageViewerSrc = val.imageAddress.split(',')
			this.imageViewerVisible = true
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				eventTimeStart: dayjs(timeArr[0]).format('YYYY-MM-DD HH:mm:ss'),
				eventTimeEnd: dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss')
			}
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'getMemberAccountSubExport',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
